<template>
  <div class="kqtj_low">
    <div class="kqtj_low_1">
      <div class="kqtj_low_1_11" style="margin-right: 10px">
        <my-date :items="levelItems" width="300"></my-date>
      </div>
      <div class="kqtj_low_1_1">
        <my-select :items="levelItems" ph="全部客服组" width="160"></my-select>
      </div>
      <div class="kqtj_low_1_1" style="margin-right: 240px">
        <my-select :items="sourceItems" ph="全部客服" width="150"></my-select>
      </div>
      <div class="kqtj_low_1_3">
        <my-button color="none">导出当前数据</my-button>
      </div>
    </div>
    <div style="width: 1020px">
      <div class="kqtj_low_2">
        <base-table :mydata="CzData" :mytitle="CzTitle" type=""></base-table>
      </div>
      <div class="pages" style="padding-top: 20px">
        <el-pagination
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, prev, pager, next, sizes, jumper"
          :total="400"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import BaseTable from "@/components/MyTable/BaseTable.vue";
import MySelect from "@/components/MyInput/MySelect";
// import MySearch from "@/components/MyInput/MySearch";
import MyButton from "@/components/MyInput/MyButton";
import MyDate from "@/components/MyInput/MyDate";
export default {
  components: {
    // MySearch,
    MyButton,
    BaseTable,
    MySelect,
    MyDate,
  },
  data() {
    return {
      CzData: [
        {
          name: "客服小美",
          time: "12h",
          time1: "3h",
          time2: "8h",
          time3: "7h",
          time4: "1h",
        },
        {
          name: "客服小美",
          time: "12h",
          time1: "3h",
          time2: "8h",
          time3: "7h",
          time4: "1h",
        },
        {
          name: "客服小美",
          time: "12h",
          time1: "3h",
          time2: "8h",
          time3: "7h",
          time4: "1h",
        },
        {
          name: "客服小美",
          time: "12h",
          time1: "3h",
          time2: "8h",
          time3: "7h",
          time4: "1h",
        },
        {
          name: "客服小美",
          time: "12h",
          time1: "3h",
          time2: "8h",
          time3: "7h",
          time4: "1h",
        },
        {
          name: "客服小美",
          time: "12h",
          time1: "3h",
          time2: "8h",
          time3: "7h",
          time4: "1h",
        },
        {
          name: "客服小美",
          time: "12h",
          time1: "3h",
          time2: "8h",
          time3: "7h",
          time4: "1h",
        },
        {
          name: "客服小美",
          time: "12h",
          time1: "3h",
          time2: "8h",
          time3: "7h",
          time4: "1h",
        },
        {
          name: "客服小美",
          time: "12h",
          time1: "3h",
          time2: "8h",
          time3: "7h",
          time4: "1h",
        },
        {
          name: "客服小美",
          time: "12h",
          time1: "3h",
          time2: "8h",
          time3: "7h",
          time4: "1h",
        },
      ],
      CzTitle: [
        {
          name: "客服昵称",
          prop: "name",
          width: 129,
        },
        {
          name: "登陆时长",
          prop: "time",
          width: 184,
        },
        {
          name: "空闲时长",
          prop: "time1",
          width: 184,
        },
        {
          name: "忙碌时长",
          prop: "time2",
          width: 184,
        },
        {
          name: "在线时长",
          prop: "time3",
          width: 175,
        },
        {
          name: "离线时长",
          prop: "time4",
          width: 150,
        },
      ],
      sourceItems: [
        {
          label: "王美美",
          value: 0,
        },
        {
          label: "七尾",
          value: 1,
        },
        {
          label: "李想",
          value: 2,
        },

        {
          label: "王志",
          value: 3,
        },
      ],
      levelItems: [
        {
          label: "全部",
          value: 0,
        },
        {
          label: "客服组一",
          value: 1,
        },
        {
          label: "客服组二",
          value: 2,
        },

        {
          label: "客服组三",
          value: 3,
        },
      ],
    };
  },
};
</script>

<style>
.kqtj_low {
  width: 1040px;
  height: 770px;
  background-color: #ffffff;
  padding-top: 3px;
}
.kqtj_low_1_11 {
  padding-left: 10px;
}
.kqtj_low_1 {
  display: flex;
  margin-top: 20px;
  margin-left: 12px;
}
.kqtj_low_1_1 {
  margin-right: 10px;
}
.kqtj_low_2 {
  width: 100%;
  margin-top: 20px;
  margin-left: 10px;
  padding-left: 10px;
}
</style>